<template>
  <div class="bangdan">
    <!--电影顶部搜索框-->
    <div class="all-button-style">
      <el-button
          type="text"
          class="text-button"
          v-for="item in buttonType"
          @click="getShowing(item.id)"
          round :class="{'text-button-activity':item.isActivity,'text-button-inactivity':!item.isActivity}">
        {{ item.name }}
      </el-button>
    </div>
    <!--榜单数据-->
    <div v-if="dataList" class="allListStyle">
      <!-- 想看数第一 -->
      <sn-row-has-four-col
          class="margin-bottom"
          v-for="(item,index) in dataList"
          :one="3" :two="7" :three="14" :gutter="0">
        <el-image slot="one-col"
                  v-if="index===0 && pageIndex===1"
                  class="ranking-top-icon"
                  :src="firstUrl"/>
        <div slot="one-col" class="ranking-index" v-if="index!==0 || pageIndex!==1">
          <font size="10px">{{ index + 1 + pageSize * (pageIndex - 1) }}</font>
        </div>
        <div slot="two-col">
          <el-image
              @click="getIntroduce(item.movieId)"
              :src="item.poster"
              class="first-image"/>
        </div>
        <div slot="three-col" class="box-office-first">
          <!-- 电影名 -->
          <el-link
              :underline="false"
              @click="getIntroduce(item.movieId)">
            <sn-text
                :font-size="30"
                :move-down="100"
                class="margin-bottom"
                :text="item.movieName"/>
          </el-link>
          <!-- 上映时间-->
          <div class="to-flex margin-top-20">
            <sn-text
                font-color="#999"
                :move-down="80"
                class="margin-right"
                text="上映时间 :"/>
            <sn-text
                :move-down="80"
                font-color="#999"
                class="margin-right"
                :text="String(item.showDate).split(' ')[0]"/>
          </div>
          <!-- 想看数-->
          <div v-if="monthlyFocusType === 1" class="to-flex">
            <sn-text
                :font-size="30"
                :move-down="90"
                text="想看的人数："
                font-color="#FFB400"/>
            <sn-text
                :font-size="30"
                :move-down="90"
                :text="item.expect"
                font-color="#FFB400"/>
          </div>
          <!-- 评分-->
          <div v-if="monthlyFocusType === 2" class="to-flex">
            <sn-text
                :font-size="30"
                :move-down="90"
                :text="item.movieScore"
                font-color="#FFB400"/>
          </div>
          <!-- 票房-->
          <div v-if="monthlyFocusType === 3" class="to-flex">
            <sn-text
                :font-size="30"
                :move-down="90"
                text="票房："
                font-color="#FFB400"/>
            <sn-text
                :font-size="30"
                :move-down="90"
                :text="item.boxOffice"
                font-color="#FFB400"/>
          </div>
        </div>
      </sn-row-has-four-col>
      <!--电影分页列表-->
      <el-pagination
          @current-change="currentChangeHandle"
          :current-page="this.pageIndex"
          :page-size="this.pageSize"
          :total="this.totalNum"
          layout="total, prev, pager, next, jumper"/>
    </div>
  </div>
</template>

<script>
export default {
  name: "movieMonthlyFocus",
  data() {
    return {
      monthlyFocusType: 1,
      //本页数据
      dataList: [],
      //页数编码
      pageIndex: 1,
      //当前页条数
      pageSize: 10,
      //总条数
      totalNum: 0,
      //总页数
      pages: 0,

      firstUrl: ''
    }
  },
  props: {
    //榜单类型
    buttonType: {
      type: Array,
      default() {
        return [
          {
            id: 1,
            name: '最受期待榜',
            isActivity: true
          },
          {
            id: 2,
            name: '高评分榜',
            isActivity: false
          },
          {
            id: 3,
            name: '高票房榜',
            isActivity: false
          }
        ]
      }
    },
  },
  created() {
    this.getDataList(1, 1)
  },
  methods: {
    //获取榜单类型的点击事件
    getShowing(id) {
      for (let item of this.buttonType) {
        if (item.id === id) {
          //点击时参数为id
          item.isActivity = true
          this.monthlyFocusType = id
          //切换类型时，把页数置为1
          this.pageIndex = 1
          this.getDataList(this.monthlyFocusType)
          //将数据发送给父类
        } else {
          item.isActivity = false
        }
      }
    },
    //到简介页面
    getIntroduce(id) {
      this.$store.commit(this.mutationsTypes.EXCHANGE_MOVIE_ID, id)
      this.$router.push({
        name: 'introduce'
      })
    },

    //根据榜单类型获取电影列表
    getDataList(id, pageNums) {
      //1 最受期待榜
      if (id === 1) {
        this.getTheMostExpectedList(pageNums)
        //2 Top100榜
      } else if (id === 2) {
        this.getHighScoreMovieList(pageNums)
        //3 高票房榜
      } else if (id === 3) {
        this.getTheHighBoxOffice(pageNums)
      }
    },

    //最受期待榜
    getTheMostExpectedList(pageNums) {
      this.$http({
        url: '/web/movie/index/getTheMostExpectedShow',
        method: 'get',
        params: this.$http.adornParams({
          'page': pageNums,
          'limit': this.pageSize,
        })
      }).then(({data}) => {
        this.dataList = []
        this.dataList = data.data
        this.totalNum = this.dataList[pageNums - 1].total
        this.pageSize = this.dataList[pageNums - 1].size
        this.pages = Math.floor((this.totalNum / this.pageSize))
      })
    },

    //评分榜Top100
    getHighScoreMovieList(pageNums) {
      this.$http({
        url: '/web/movie/index/getHighScoreShow',
        method: 'get',
        params: this.$http.adornParams({
          'page': pageNums,
          'limit': this.pageSize,
        })
      }).then(({data}) => {
        console.log(data)
        console.log(pageNums)
        for (let item of data.data) {
          item.movieScore = Number(item.movieScore).toFixed(1)
        }
        this.dataList = data.data
        this.totalNum = this.dataList[pageNums - 1].total
        this.pageSize = this.dataList[pageNums - 1].size
        this.pages = Math.floor((this.totalNum / this.pageSize))
      })
    },

    //最高票房榜
    getTheHighBoxOffice(pageNums) {
      this.$http({
        url: '/web/movie/index/getHighBoxOfficeMovie',
        method: 'get',
        params: this.$http.adornParams({
          'page': pageNums,
          'limit': this.pageSize,
        })
      }).then(({data}) => {
        this.dataList = data.data
        this.totalNum = this.dataList[pageNums - 1].total
        this.pageSize = this.dataList[pageNums - 1].size
        this.pages = this.totalNum % this.pageSize === 0 ? Math.floor(this.totalNum / this.pageSize) : (Math.floor(this.totalNum / this.pageSize) + 1)
      })
    },

    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList(this.monthlyFocusType, val)
    }
  }
}
</script>

<style scoped>
.text-button-inactivity {
  font-size: 20px;
  color: grey;
}

.text-button-activity {
  font-size: 25px;
  color: red;
}

.all-button-style {
  padding: 30px;
  text-align: center;
  background-color: #333333;
  margin: 0;
}

/*  排名 */
/* 榜单总样式*/
.allListStyle {
  margin: 100px 400px auto 400px;
}

.ranking {
  font-weight: bold;
  color: #999;
  font-size: 16.5px;
  font-style: italic;
}

.first-image {
  height: 260px;
  width: 230px;
}


.ranking-top-icon {
  width: 50px;
  height: 50px;
  margin-top: 100px;
}

.ranking-index {
  margin-top: 100px;
  width: 50px;
  height: 50px;
  text-align: center;
  size: 30px;
  color: #fff;
  background-color: #ffb400;
}

.indexImage {
  position: absolute;
  z-index: 1;
  width: 165px;
  height: 140px;
}

.third {
  position: relative;
  left: 40px;
}

.description {
  position: relative;
  padding: 10px 0;
  border: 1px solid #EFEFEF;
  top: 140px;
  width: 163.5px;
}

.divider {
  margin-top: 160px;
}

.bangdan {
  margin-bottom: 20px;
}
</style>
